<template>
  <div
    class="agent"
    v-loading.fullscreen.lock="loading"
    fullscreen="false"
    element-loading-text="加载中"
    element-loading-background="rgba(0, 0, 0, 0.2)"
    element-loading-spinner="el-icon-loading"
  >
    <div class="adduser">
      <div class="add-box">
        <el-button type="primary" icon="el-icon-add" @click="dialogFormVisible = true">
          <i class="iconfont" style="font-size:13px">&#xe6d5;</i> 新增
        </el-button>
      </div>

      <el-dialog title="添加代理" :visible.sync="dialogFormVisible">
        <el-form :model="addagent" :rules="rules" ref="agent">
          <el-form-item label="用户名:" prop="username" :label-width="formLabelWidth">
            <el-input v-model="addagent.username" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password" :label-width="formLabelWidth">
            <el-input type="password" v-model="addagent.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="tel" :label-width="formLabelWidth">
            <el-input type="text" v-model="addagent.tel" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="状 态" :label-width="formLabelWidth">
            <el-radio v-model="addagent.status" label="0">禁用</el-radio>
            <el-radio v-model="addagent.status" label="1">正常</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addAgent('agent')">添 加</el-button>
        </div>
      </el-dialog>

      <el-dialog title="充值房卡" :visible.sync="dialogForm1Visible" top="30vh">
        <el-form>
          <el-form-item label="充值房卡数量:" :label-width="formLabelWidth">
            <el-input v-model="addRoomCardNumber" type="number" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancleAdd()">取消充值</el-button>
          <el-button type="primary" @click="confirmAddCard()">确认充值</el-button>
        </div>
      </el-dialog>

      <div class="input-box">
        <el-input placeholder="请输入代理手机号" v-model="searchTel">
          <el-button slot="append" @click="searchAgent()">搜索</el-button>
        </el-input>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          border
          :header-cell-style="{
            /* 样式名称 ： 属性 */
            'font-weight':'bold',
            'text-align':'center',
             'color':'#4d5259'
            }"
          :cell-style="{
            /* 样式名称 ： 属性 */
            'text-align': 'center',
            }"
        >
          <el-table-column prop="agentId" label="代理ID" width="100"></el-table-column>
          <el-table-column prop="username" label="用户名" width="180"></el-table-column>
          <el-table-column prop="tel" label="手机号" width="150"></el-table-column>
          <el-table-column prop="status" label="状态" width="150">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status" type="success">可用</el-tag>
              <el-tag v-else type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="roomCard" label="剩余房卡" width="180"></el-table-column>
          <el-table-column prop="createTime" label="开通代理时间" width="ls200"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
                <!-- <i class="iconfont">&#xe661;</i> -->
                修改信息
              </el-button>
              <el-button size="mini" type="primary" @click="addRoomCard(scope.$index, scope.row)">
                <!-- <i class="iconfont">&#xe66c;</i> -->
                给他冲卡
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.agent {
  background-color: #f5f6fa;
  padding: 15px;
  .adduser {
    .el-input__inner {
      width: 350px;
    }
    overflow: hidden;
    // height: 500px;
    // box-sizing: border-box;
    background-color: #fff;
    padding: 15px;
    .add-box {
      float: left;
    }
    .input-box {
      float: right;
    }
    .table-box {
      margin-top: 75px;
    }
  }
}
</style>
<script>
import { showTips } from "@/utils";
import store from "@/store/index.js";
import { mapMutations } from "vuex";
import {
  getAgents,
  addOneAgent,
  editAgent,
  searchAgentById,
  addRoomCardForAgent
} from "@/api";
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogForm1Visible: false,
      searchTel: "",
      loading: true,
      addRoomCardNumber: null,
      userInfo: {},
      addagent: {
        agentId: "",
        username: "",
        password: "",
        roomCard: 0,
        tel: "",
        status: "1"
      },
      editAgent: {
        agentId: "",
        username: "",
        password: "",
        roomCard: null,
        tel: "",
        status: "1"
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
        ],
        tel: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号码", trigger: "blur" }
        ]
      },
      formLabelWidth: "120px",
      tableData: []
    };
  },
  mounted() {
    this.userInfo = store.getters.getUserInfo;
    this.getAllAgent();
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    getAllAgent() {
      getAgents().then(res => {
        if (res.code == 200) {
          this.tableData = res.data;
        }
        this.loading = false;
      });
    },
    //搜索代理
    searchAgent() {
      if (this.searchTel != null && this.searchTel.trim().length > 0) {
        this.loading = true;
        searchAgentById(this.searchTel).then(res => {
          if (res.code == 200) {
            this.tableData = res.data;
          } else if (res.code == 206) {
            // alert('查无此人')
            showTips("success", "查无此人");
          }
          this.loading = false;
          this.searchTel = null;
        });
      } else {
        showTips("warning", "请输入手机号码");
      }
    },
    handleEdit(index, row) {
      // console.log(index, row);
    },

    //弹出给代理充值房卡对话框
    addRoomCard(index, row) {
      this.editAgent = row;
      this.dialogForm1Visible = true;
    },
    //确定充值房卡
    confirmAddCard() {
      var params = {
        agentId: this.editAgent.agentId,
        addCardNumber: parseInt(this.addRoomCardNumber),
        managerId: this.userInfo.agentId
      };
      if (
        this.userInfo.roomCard > 0 &&
        this.userInfo.roomCard - this.addRoomCardNumber >= 0
      ) {
        addRoomCardForAgent(params).then(res => {
          if (res.code == 200) {
            this.getAllAgent();
            this.dialogForm1Visible = false;
            this.userInfo.roomCard -= this.addRoomCardNumber;
            this.addRoomCardNumber = null;
            this.setUserInfo(this.userInfo);
            showTips("success", "充值成功");
          }
        });
      } else {
        showTips("warning", "房卡余额不足，请充值！");
      }
    },
    //取消充值
    cancleAdd() {
      this.addRoomCardNumber = null;
      this.dialogForm1Visible = false;
    },
    //添加代理
    addAgent(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addOneAgent(this.addagent).then(res => {
            // console.log(res);
            if (res.code == 200) {
              this.dialogFormVisible = false;
              this.getAllAgent();
              showTips("success", "添加成功");
            }
          });
        } else {
          showTips("fail", "添加失败");
          return false;
        }
      });
    }
  }
};
</script>
